<div class="stat-container">
    <div class="stat-condition">
        <!-- 导入数据 -->
        <button pButton type="button" label="导入数据" (click)="upload($event)"></button>
        <!-- 清除数据 -->
        <button pButton type="button" label="清除数据" (click)="clean($event)"></button>
        <!-- 查询条件 -->
        <span class="condition-label">考核时间</span>
        <p-calendar [showIcon]="true" [(ngModel)]="start" [style]="{'margin-left': '20px'}" dateFormat="yy-mm-dd" [showTime]="true"
            [showSeconds]="true" [locale]="zh" [inputStyle]="{'background':'transparent', 'color':'whitesmoke', 'border-color':'#1F3F83'}"
            (onSelect)="calculate()">
        </p-calendar>
        <span style="color: #1F3F83;font-weight:600;">——</span>
        <p-calendar [showIcon]="true" [(ngModel)]="end" dateFormat="yy-mm-dd" [locale]="zh" [showTime]="true"
            [showSeconds]="true" [inputStyle]="{'background':'transparent', 'color':'whitesmoke', 'border-color':'#1F3F83'}"
            (onSelect)="calculate()">
        </p-calendar>
        <ng-container *ngIf="activeIndex == 0">
            <span class="condition-label">考核系列</span>
            <p-dropdown [options]="kqSeq" [style]="{'width':'120px'}" [(ngModel)]="selectItem" (onChange)="calculate()">
            </p-dropdown>
        </ng-container>
        <ng-container *ngIf="activeIndex == 0">
            <span class="condition-label">回访类型</span>
            <p-dropdown [options]="responseType" [style]="{'width':'120px'}" [(ngModel)]="respSelectItem"
                (onChange)="calculate()">
            </p-dropdown>
        </ng-container>
        <button pButton type="button" label="导出专报" (click)="export()"></button>
    </div>
    <div class="stat-container">
        <div class="container-left">
            <mdl-tabs (mdl-tab-active-changed)="tabChanged($event)" mdl-ripple [mdl-tab-active-index]="activeIndex">
                <mdl-tab-panel>
                    <mdl-tab-panel-title>
                        <span>诉求三率情况</span>
                    </mdl-tab-panel-title>
                    <mdl-tab-panel-content>
                        <p-table [columns]="cols" [value]="items" selectionMode="single" [scrollable]="true"
                            [scrollHeight]="'calc(100vh - 245px)'">
                            <ng-template pTemplate="header" let-columns>
                                <tr style="height: 50px;">
                                    <th *ngFor="let col of columns" [ngStyle]="col.style">
                                        {{col.header}}
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData let-columns="columns">
                                <tr [pSelectableRow]="rowData">
                                    <td *ngFor="let col of columns" [ngStyle]="col.style" (click)="showDetail(rowData)">
                                        {{rowData[col.field]}}
                                    </td>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="emptymessage" let-columns>
                                <tr>
                                    <td [attr.colspan]="columns.length">
                                        无数据
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                    </mdl-tab-panel-content>
                </mdl-tab-panel>
                <mdl-tab-panel>
                    <mdl-tab-panel-title>
                        <span>街道承办情况</span>
                    </mdl-tab-panel-title>
                    <mdl-tab-panel-content>
                        <p-table [columns]="streetCols" [value]="streetItems" selectionMode="single" [scrollable]="true"
                            [scrollHeight]="'calc(100vh - 245px)'">
                            <ng-template pTemplate="header" let-columns>
                                <tr style="height: 50px;">
                                    <th *ngFor="let col of columns" [ngStyle]="col.style">
                                        {{col.header}}
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData let-columns="columns">
                                <tr [pSelectableRow]="rowData">
                                    <td *ngFor="let col of columns" [ngStyle]="col.style" (click)="showDetail(rowData)">
                                        {{rowData[col.field]}}
                                    </td>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="emptymessage" let-columns>
                                <tr>
                                    <td [attr.colspan]="columns.length">
                                        无数据
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                    </mdl-tab-panel-content>
                </mdl-tab-panel>
                <mdl-tab-panel>
                    <mdl-tab-panel-title>
                        <span>部门承办情况</span>
                    </mdl-tab-panel-title>
                    <mdl-tab-panel-content>
                        <p-table [columns]="unitCols" [value]="unitItems" selectionMode="single" [scrollable]="true"
                            [scrollHeight]="'calc(100vh - 245px)'">
                            <ng-template pTemplate="header" let-columns>
                                <tr style="height: 50px;">
                                    <th *ngFor="let col of columns" [ngStyle]="col.style">
                                        {{col.header}}
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData let-columns="columns">
                                <tr [pSelectableRow]="rowData">
                                    <td *ngFor="let col of columns" [ngStyle]="col.style" (click)="showDetail(rowData)">
                                        {{rowData[col.field]}}
                                    </td>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="emptymessage" let-columns>
                                <tr>
                                    <td [attr.colspan]="columns.length">
                                        无数据
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                    </mdl-tab-panel-content>
                </mdl-tab-panel>
            </mdl-tabs>
        </div>
        <div id="chart-container" class="container-right">

        </div>
    </div>
</div>